<% if @landing_page %>
<div class="crayons-card p-6"
     data-controller="landing-page-modal"
     data-landing-page-modal-root-selector-value="#add-landing-page-link-modal-root"
     data-landing-page-modal-content-selector-value="#add-landing-page-link-modal"
     data-landing-page-modal-title-value="There's another locked screen..."
     data-landing-page-modal-size-value="default">
<% else %>
<div class="crayons-card p-6">
<% end %>

  <%= form_for [:admin, @page] do |form| %>
    <div class="flex flex-col gap-4">
      <% if @page_template.present? %>
        <%= form.hidden_field :page_template_id, value: @page_template.id %>
        
        <div class="crayons-notice crayons-notice--info mb-2" aria-live="polite">
          <strong>Using template:</strong> <%= @page_template.name %>
          <% if @page_template.description.present? %>
            — <%= @page_template.description %>
          <% end %>
          <br>
          <span class="fs-s">Fill in the template fields below. The page content will be generated automatically.</span>
        </div>
      <% end %>
      
      <div class="crayons-field">
        <%= form.label :title, class: "crayons-field__label" %>
        <%= form.text_field :title, class: "crayons-textfield", required: true %>
      </div>
      <div class="crayons-field">
        <%= form.label :slug, class: "crayons-field__label" %>
        <%= form.text_field :slug, class: "crayons-textfield", pattern: "^[0-9a-z-_/]*$", required: true %>
      </div>
      <div class="crayons-field">
        <%= form.label :description, class: "crayons-field__label" %>
        <%= form.text_field :description, class: "crayons-textfield", required: true %>
      </div>
      
      <% if @page_template.present? && @page_template.schema_fields.any? %>
        <hr class="my-2">
        <h3 class="crayons-subtitle-2">Template Fields</h3>
        <p class="color-base-70 fs-s mb-2">Fill in the following fields to generate the page content:</p>
        
        <% template_data = @page.template_data || {} %>
        <% @page_template.schema_fields.each do |field| %>
          <div class="crayons-field">
            <label for="page_template_data_<%= field['name'] %>" class="crayons-field__label<%= ' required' if field['required'] %>">
              <%= field['label'] || field['name'].titleize %>
            </label>
            
            <% case field['type'] %>
            <% when 'textarea' %>
              <textarea name="page[template_data][<%= field['name'] %>]" 
                        id="page_template_data_<%= field['name'] %>"
                        class="crayons-textfield"
                        rows="4"
                        <%= 'required' if field['required'] %>><%= template_data[field['name']] %></textarea>
            <% when 'number' %>
              <input type="number" 
                     name="page[template_data][<%= field['name'] %>]" 
                     id="page_template_data_<%= field['name'] %>"
                     value="<%= template_data[field['name']] %>"
                     class="crayons-textfield"
                     <%= 'required' if field['required'] %>>
            <% when 'url' %>
              <input type="url" 
                     name="page[template_data][<%= field['name'] %>]" 
                     id="page_template_data_<%= field['name'] %>"
                     value="<%= template_data[field['name']] %>"
                     class="crayons-textfield"
                     placeholder="https://..."
                     <%= 'required' if field['required'] %>>
            <% when 'email' %>
              <input type="email" 
                     name="page[template_data][<%= field['name'] %>]" 
                     id="page_template_data_<%= field['name'] %>"
                     value="<%= template_data[field['name']] %>"
                     class="crayons-textfield"
                     <%= 'required' if field['required'] %>>
            <% else %>
              <input type="text" 
                     name="page[template_data][<%= field['name'] %>]" 
                     id="page_template_data_<%= field['name'] %>"
                     value="<%= template_data[field['name']] %>"
                     class="crayons-textfield"
                     <%= 'required' if field['required'] %>>
            <% end %>
          </div>
        <% end %>
        <hr class="my-2">
      <% end %>
      
      <% unless @page_template.present? %>
        <div class="crayons-field">
          <%= form.label :template, class: "crayons-field__label" do %>
            Template
            <p class="crayons-field__description">Determines the way page's body will be embedded in the layout</p>
          <% end %>
          <%= form.select :template, Page::TEMPLATE_OPTIONS, required: true %>
        </div>
        <div class="crayons-field optional html">
          <%= form.label :body_markdown, class: "crayons-field__label" %>
          <%= form.text_area :body_markdown, rows: 10, class: "crayons-textfield" %>
        </div>
        <div class="crayons-field optional html">
          <%= form.label :body_html, class: "crayons-field__label" do %>
            Body HTML
            <p class="crayons-field__description">Only if not using markdown. HTML is dangerous ⚠️</p>
          <% end %>
          <%= form.text_area :body_html, rows: 10, class: "crayons-textfield" %>
        </div>
        <div class="crayons-field optional json">
          <%= form.label :body_json, class: "crayons-field__label" do %>
            Body JSON
            <p class="crayons-field__description">For use with template type <code>json</code></p>
          <% end %>
          <%= form.text_area :body_json, rows: 10, class: "crayons-textfield" %>
        </div>
        <div class="crayons-field optional css">
          <%= form.label :body_css, class: "crayons-field__label" do %>
            Body CSS
            <p class="crayons-field__description">For use with template type <code>css</code></p>
          <% end %>
          <%= form.text_area :body_css, rows: 10, class: "crayons-textfield" %>
        </div>
      <% end %>
      
      <div class="crayons-field">
        <% if @page.social_image_url %>
          <img src="<%= @page.social_image_url %>" style="max-width:500px;display:block" />
        <% end %>
        <%= form.label :social_image, class: "crayons-field__label" %>
        <%= form.file_field :social_image %>
      </div>
      <div class="crayons-field crayons-field--checkbox">
        <%= form.check_box :is_top_level_path, class: "crayons-checkbox" %>
        <%= form.label :is_top_level_path, class: "crayons-field__label" do %>
          Is top level path?
          <p class="crayons-field__description">Determines if it is accessible by <code>/page-slug</code> vs <code>/page/page-slug</code> Be careful! ⚠️</p>
        <% end %>
      </div>

      <% if ForemInstance.private? %>
        <div class="crayons-field crayons-field--checkbox">
          <%= form.check_box :landing_page, class: "crayons-checkbox", "aria-describedby": "lock-screen-description",
                                            data: {
                                              "landing-page-modal-target": "landingPageCheckbox",
                                              action: (@landing_page.present? ? "landing-page-modal#openModal" : "")
                                            } %>
          <%= form.label :landing_page, class: "crayons-field__label" do %>
            Use as 'Locked Screen'
            <p id="lock-screen-description" class="crayons-field__description">Determines if this page will be used as a landing page for anonymous viewers.</p>
          <% end %>
        </div>
      <% end %>

      <% if @page.errors.count > 0 %>
        <div id="add-landing-page-link-modal-root">
          <% @page.errors %>
        </div>
      <% end %>

      <% if @landing_page %>
        <%= render partial: "landing_page_modal", locals: { page: @landing_page } %>
      <% end %>

      <% if current_user.tech_admin? %>
        <div class="crayons-field">
          <p>
            <b><%= link_to "Feature Flag", "/admin/feature_flags" %></b>
            <span class="c-indicator c-indicator--<%= FeatureFlag.exist?(@page.feature_flag_name) ? "success" : "warning" %>">
              <%= FeatureFlag.exist?(@page.feature_flag_name) ? "Present" : "Not Present" %>
            </span>
            <br>
            <% if FeatureFlag.exist?(@page.feature_flag_name) %>
              Access to this page is being guarded by the feature flag <code><%= @page.feature_flag_name %></code>.
              <%= link_to "Modify flag here", "/admin/feature_flags/features/#{@page.feature_flag_name}" %>
            <% else %>
              Everyone has access. Optionally guard access to this page by creating feature <code><%= @page.feature_flag_name %></code>
              <%= link_to "here", "/admin/feature_flags/features" %>
            <% end %>
            <br>
          </p>
        </div>
      <% end %>

      <div>
        <%= form.submit class: "c-btn c-btn--primary" %>
      </div>
    </div>
  <% end %>

  <% if @page.persisted? %>
    <%= form_with model: [:admin, @page], local: true, method: :delete, class: "mt-3" do |f| %>
      <%= f.submit "Delete Page", class: "c-btn c-btn--destructive c-btn--primary", data: { confirm: "Are you sure?" } %>
    <% end %>
  <% end %>
</div>

<% unless @page_template.present? %>
<script>
function showBodyFields() {
    // hide all optional elements
    document.querySelectorAll('.optional').forEach(el => el.style.display = 'none');

    document.querySelectorAll("select").forEach(el => {
      if (el.options[el.selectedIndex].value == "json") {
        document.querySelectorAll('.json').forEach(el => el.style.display = 'block');
      } else if (el.options[el.selectedIndex].value == "css") {
        document.querySelectorAll('.css').forEach(el => el.style.display = 'block');
      } else {
        document.querySelectorAll('.html').forEach(el => el.style.display = 'block');
      }
    });
  };

window.addEventListener('load', function() {
  var templateSelect = document.getElementById("page_template");
  if (templateSelect) {
    templateSelect.onchange = function() {
      showBodyFields();
    };
    showBodyFields();
  }
});
</script>
<% end %>
